﻿<!DOCTYPE html>
<html>
  <head>
    <title>产品库存</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/css/public.css" media="all" />
    <script type="text/javascript" src="/static/plugin/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/static/plugin/layui/layui.js"></script>
	  <script type="text/javascript" src="/static/js/base.js"></script>
	<style type="text/css">
		.xing
		{
			color: red;
			float: left;
			display: block;
			width: 0.1%;
			margin-top:-25px;
			margin-left: 83%; 
			font-size: 24px;
		}
	</style>
  </head>
  <script type="text/javascript"></script>
  <body  class="layui-anim">
    <div class="x-nav">
	    <span class="layui-breadcrumb">
	        <a href="">首页</a>
	        <a>
	            <cite>产品库存</cite>
	        </a>
	    </span>
	</div>
	<div class="x-body">
		<div class="layui-row" style="margin-bottom: 18px">
			<form class="layui-form">
				<div class="layui-inline">
					<div class="layui-input-inline">
	            		<input type="text" id="keyword01" class="layui-input searchVal" placeholder="请输入图号" />
					</div>
					<button type="button" class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
				</div>
			</form>
		</div>

		<table class="layui-hide" id="tableList" lay-filter="tableList"></table>

	</div>

	<script type="text/javascript">
		layui.use(['table','layer','upload','form','laydate'], function(){
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var laydate = layui.laydate;

			var $ = layui.jquery, active = {
				reload:function () {
					var keyword01 = $("#keyword01").val();
					table.reload('contenttable',{
						method:'get',
						where:{
							"material.maNumber":keyword01
						}
						,page: {
							curr: 1//重新从第 1 页开始
						}
					});
				}
			}

			$('.layui-btn').on('click', function(){
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
			table.render({
				elem: '#tableList'
				,url:'/containerStare/goodList'
				,title: '成品库存'
				,id :'contenttable'
				,limits:[10,20,30]
				,toolbar: '#toolbar'
				,request: {   //如果无需自定义请求参数，可不加该参数
					pageName: 'page' //页码的参数名称，默认：page
					,limitName: 'pageSize' //每页数据量的参数名，默认：limit
				}
				,response: {   //如果无需自定义数据响应名称，可不加该参数
					countName: 'total' //规定数据总数的字段名称，默认：count
					,dataName: 'rows' //规定数据列表的字段名称，默认：data
				}
				,cols: [
						[
					{type: 'checkbox', fixed: 'left'}
					,{field:'maId', title:'序号', sort: true, type:'numbers', width: 60}
					,{field:'material.maNumber', title:'图号'
						,templet: function(d){
							var value = "";
							if(d.material != null){
								value = d.material.maNumber
							}
							return value;
						},
					}
					,{field:'material.maName', title:'产品名称'
						,templet: function(d){
							var value = "";
							if(d.material != null){
								value = d.material.maName
							}
							return value;
						},
					}
					,{field:'csrnum', title:'数量'}
					]
				]
				,page: true
				,done : function(){
					$('th').css({
						'background-color': '#009688', 'color': '#fff','font-weight':'bold',
					})
				}
			});

			//监听复选框事件
			table.on('checkbox(tableList)',function(obj){
				if(obj.checked == true && obj.type == 'all'){
					//点击全选
					$('.layui-table-body table.layui-table tbody tr').addClass('layui-table-click');
				}else if(obj.checked == false && obj.type == 'all'){
					//点击全不选
					$('.layui-table-body table.layui-table tbody tr').removeClass('layui-table-click');
				}else if(obj.checked == true && obj.type == 'one'){
					//点击单行
					if(obj.checked == true){
						obj.tr.addClass('layui-table-click');
					}else{
						obj.tr.removeClass('layui-table-click');
					}
				}else if(obj.checked == false && obj.type == 'one'){
					//点击全选之后点击单行
					if(obj.tr.hasClass('layui-table-click')){
						obj.tr.removeClass('layui-table-click');
					}
				}
			})
		});
	</script>

  </body>
</html>
